/* CSS变量定义 */
:root {
  --primary-color: #409EFF;
  --success-color: #67C23A;
  --warning-color: #E6A23C;
  --danger-color: #F56C6C;
  --info-color: #909399;
  --text-primary: #303133;
  --text-regular: #606266;
  --text-secondary: #909399;
  --border-color: #DCDFE6;
  --background-color: #F5F7FA;
  --hover-color: #ECF5FF;
  --transition-duration: 0.3s;
  --box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  --box-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
  --gradient-primary: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
  --gradient-success: linear-gradient(135deg, #67C23A 0%, #85ce61 100%);
  --gradient-warning: linear-gradient(135deg, #E6A23C 0%, #ebb563 100%);
  --gradient-danger: linear-gradient(135deg, #F56C6C 0%, #f78989 100%);
}

/* 全局动画定义 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes scaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 基础样式 */
.app-container {
  padding: 25px;
  animation: fadeIn var(--transition-duration) ease-in-out;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* 直接解决表头换行问题 */
.el-table th > .cell {
  white-space: nowrap !important;
}

/* 表格单元格也不换行 */
.el-table .cell {
  white-space: nowrap !important;
}

/* 表单不换行 */
.el-form-item__label {
  white-space: nowrap !important;
}

/* 其他基础样式 */
.mb8 {
  margin-bottom: 8px;
}

.dialog-footer {
  text-align: center;
}

/* 表格样式优化 */
.el-table {
  margin: 30px 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 12px !important;
  box-shadow: var(--box-shadow) !important;
  transition: all var(--transition-duration) ease !important;
  animation: slideIn var(--transition-duration) ease-out !important;
  overflow: hidden !important;
}

.el-table:hover {
  box-shadow: var(--box-shadow-hover) !important;
}

/* 表头样式优化 */
.el-table thead {
  color: var(--text-primary) !important;
  background: linear-gradient(to right, var(--background-color), #ffffff) !important;
}

.el-table th {
  background-color: var(--background-color) !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  padding: 15px 0 !important;
  transition: all var(--transition-duration) ease !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
}

.el-table th:hover {
  background-color: var(--hover-color) !important;
}

/* 表格行样式优化 */
.el-table__row {
  transition: all var(--transition-duration) ease !important;
}

.el-table__row:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* 设置表格列的最小宽度 */
.el-table .el-table__cell {
  min-width: 100px !important;
}

/* 特定列宽度定义 */
/* 复选框列 */
.el-table .el-table-column--selection,
.el-table-column--selection .cell {
  min-width: 40px !important;
  width: 40px !important;
  max-width: 40px !important;
}

/* 主键ID列 */
.el-table .el-table__cell:first-child,
.el-table th:first-child,
.el-table td:first-child {
  min-width: 60px !important;
  width: 60px !important;
  max-width: 60px !important;
}

/* 套餐类型列 */
.el-table .cell:contains("套餐类型") {
  min-width: 120px !important;
  width: 120px !important;
}

/* 总额度列 */
.el-table .cell:contains("总额度") {
  min-width: 80px !important;
  width: 80px !important;
}

/* 已使用额度列 */
.el-table .cell:contains("已使用额度") {
  min-width: 100px !important;
  width: 100px !important;
}

/* 是否删除列 */
.el-table .cell:contains("是否删除") {
  min-width: 80px !important;
  width: 80px !important;
}

/* 时间相关列 */
.el-table-column__label:contains("时间"),
.el-table .cell:contains("时间"),
.el-table .cell:contains("日期") {
  min-width: 140px !important;
  width: 140px !important;
}

/* 操作列 */
.el-table-column--operation,
.el-table .cell:contains("操作") {
  min-width: 120px !important;
  width: 120px !important;
}

/* 表格单元格样式 */
.el-table td {
  padding: 12px 0 !important;
  text-align: center !important;
  transition: all var(--transition-duration) ease !important;
}

.el-table td:hover {
  background-color: var(--hover-color) !important;
}

/* 搜索表单优化 */
.el-form--inline {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-bottom: 30px !important;
  align-items: center !important;
  gap: 20px !important;
  background-color: #fff !important;
  padding: 25px !important;
  border-radius: 8px !important;
  box-shadow: var(--box-shadow) !important;
  transition: all var(--transition-duration) ease !important;
}

.el-form--inline:hover {
  box-shadow: var(--box-shadow-hover) !important;
  transform: translateY(-2px);
}

/* 搜索按钮容器样式 */
.el-form--inline .el-form-item:last-child {
  margin: 0 !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

/* 表单项优化 */
.el-form--inline .el-form-item {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  min-height: 32px !important;
  flex-shrink: 0 !important;
}

/* 表单标签样式优化 */
.el-form-item__label {
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  transition: color var(--transition-duration) ease !important;
  white-space: nowrap !important;
  width: auto !important;
  min-width: 160px !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  padding-right: 12px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  line-height: 32px !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
}

/* 表单项容器样式优化 */
.el-form-item {
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  min-height: 32px !important;
}

/* 表单内容区域样式优化 */
.el-form-item__content {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  margin-left: 0 !important;
  flex-shrink: 0 !important;
}

/* 输入框样式 */
.el-form-item .el-input,
.el-form-item .el-select,
.el-form-item .el-date-editor {
  width: 200px !important;
  flex-shrink: 0 !important;
}

/* 按钮组样式 */
.mb8 {
  margin: 35px 0 25px 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  background-color: #fff !important;
  padding: 25px !important;
  border-radius: 8px !important;
  box-shadow: var(--box-shadow) !important;
  transition: all var(--transition-duration) ease !important;
}

.mb8:hover {
  box-shadow: var(--box-shadow-hover) !important;
  transform: translateY(-2px);
}

.mb8 .el-col {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* 弹窗样式 */
.el-dialog {
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: var(--box-shadow) !important;
  transition: all var(--transition-duration) ease !important;
}

.el-dialog__header {
  background: linear-gradient(to right, var(--background-color), #ffffff) !important;
  padding: 20px !important;
  margin: 0 !important;
}

.el-dialog__title {
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

.el-dialog__body {
  padding: 25px !important;
}

/* 表单样式优化 */
.el-form {
  background-color: #ffffff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  animation: scaleIn var(--transition-duration) ease-out;
}

/* 分页样式 */
.pagination-container {
  position: fixed !important;
  bottom: 0 !important;
  left: 200px !important;
  right: 0 !important;
  background-color: #fff !important;
  padding: 20px !important;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08) !important;
  z-index: 1000 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  margin: 0 !important;
  border-top: 1px solid var(--border-color) !important;
  transition: all var(--transition-duration) ease !important;
}

/* 表格容器样式 */
.el-table-wrapper {
  flex: 1 !important;
  margin-bottom: 100px !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background-color: #fff !important;
  padding: 25px !important;
  border-radius: 12px !important;
  box-shadow: var(--box-shadow) !important;
  transition: all var(--transition-duration) ease !important;
}

.el-table-wrapper:hover {
  box-shadow: var(--box-shadow-hover) !important;
}

/* 表格内容过长时的处理 */
.text-ellipsis,
.el-table .cell {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 表格链接按钮样式 */
.el-button.el-button--primary.is-link {
  margin: 0 5px !important;
  transition: all var(--transition-duration) ease !important;
}

.el-button.el-button--primary.is-link:hover {
  transform: translateY(-2px) !important;
  color: var(--primary-color) !important;
}

/* 表格hover效果 */
.el-table tbody tr:hover > td {
  background-color: #f5f7fa;
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

::-webkit-scrollbar-thumb {
  background: var(--gradient-primary) !important;
  border-radius: 4px !important;
}

::-webkit-scrollbar-track {
  background: var(--background-color) !important;
  border-radius: 4px !important;
}

/* 卡片样式优化 */
.el-card {
  border-radius: 12px !important;
  box-shadow: var(--box-shadow) !important;
  margin-bottom: 25px !important;
  transition: all var(--transition-duration) ease !important;
  animation: scaleIn var(--transition-duration) ease-out !important;
  border: none !important;
  overflow: hidden !important;
}

.el-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--box-shadow-hover) !important;
}

.el-card__header {
  padding: 20px !important;
  border-bottom: 1px solid var(--border-color) !important;
  background: linear-gradient(to right, var(--background-color), #ffffff) !important;
}

.el-card__body {
  padding: 25px !important;
  background: #ffffff !important;
}

/* 提示信息样式优化 */
.el-message {
  border-radius: 8px !important;
  padding: 12px 24px !important;
  min-width: 300px !important;
  box-shadow: var(--box-shadow) !important;
  animation: slideIn var(--transition-duration) ease-out !important;
}

/* 加载状态样式优化 */
.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(4px) !important;
}

.el-loading-spinner {
  animation: rotate 1s linear infinite !important;
}

.el-loading-spinner .el-loading-text {
  color: var(--primary-color) !important;
  font-weight: 500 !important;
  margin-top: 12px !important;
  font-size: 14px !important;
}

/* 表格斑马纹样式优化 */
.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #fafafa !important;
}

/* 表格hover效果优化 */
.el-table__body tr:hover > td {
  background-color: var(--hover-color) !important;
}

/* 表单验证提示样式优化 */
.el-form-item.is-error .el-input__wrapper {
  box-shadow: 0 0 0 1px var(--danger-color) inset !important;
}

.el-form-item__error {
  padding-top: 6px !important;
  font-size: 12px !important;
  color: var(--danger-color) !important;
  font-weight: 500 !important;
}

/* 按钮组样式优化 */
.el-button-group {
  display: inline-flex !important;
}

.el-button-group .el-button {
  border-radius: 0 !important;
}

.el-button-group .el-button:first-child {
  border-top-left-radius: 6px !important;
  border-bottom-left-radius: 6px !important;
}

.el-button-group .el-button:last-child {
  border-top-right-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
}

/* 响应式布局优化 */
@media screen and (max-width: 768px) {
  .app-container {
    padding: 15px !important;
  }
  
  .el-form {
    padding: 20px !important;
  }
  
  .el-dialog {
    width: 95% !important;
    margin: 3vh auto !important;
    border-radius: 12px !important;
  }
  
  .el-card {
    margin-bottom: 15px !important;
  }
}

/* 表头文字不换行强制处理 */
.el-table .el-table__header-wrapper th .cell {
  white-space: nowrap !important; 
  overflow: visible !important;
  text-overflow: clip !important;
  min-width: auto !important;
  font-size: 13px !important;
  letter-spacing: -0.5px !important;
  padding: 0 6px !important;
  font-weight: 500 !important;
}

/* 特殊列宽度设置 - 每个ID类型的列设置最小宽度 */
.el-table th[class*="ID"],
.el-table th[class*="Id"],
.el-table th[class*="id"] {
  min-width: 105px !important;
  width: 105px !important;
}

/* 关联用户ID列 */
.el-table th[class*="用户"],
.el-table-column--label:contains("关联用户") {
  min-width: 110px !important;
  width: 110px !important;
}

/* 主键ID列宽度调整 */
.el-table th:first-child,
.el-table-column:first-child,
.el-table .cell:contains("主键") {
  min-width: 75px !important;
  width: 75px !important;
}

/* 固定表头不换行与宽度 */
.el-table .cell:contains("关联用户ID"),
.el-table .cell:contains("关联用户PID") {
  min-width: 110px !important;
  width: 110px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  display: inline-block !important;
  font-size: 12px !important;
}

.el-table .cell:contains("主键ID") {
  min-width: 75px !important;
  width: 75px !important;
}

.el-table .cell:contains("用户手机号") {
  min-width: 120px !important;
  width: 120px !important;
}

.el-table .cell:contains("删除标记") {
  min-width: 80px !important;
  width: 80px !important;
}

.el-table .cell:contains("操作") {
  min-width: 120px !important;
  width: 120px !important;
}

/* 表头样式 - 使用正确的选择器重写 */
.el-table__header th {
  background-color: var(--background-color) !important;
  font-weight: 500 !important;
  min-width: 100px !important;
  max-width: 100% !important;
}

/* 表头文字不换行 - 直接覆盖样式 */
.el-table__header .cell {
  white-space: nowrap !important;
  display: block !important;
  width: auto !important;
  overflow: visible !important;
  text-overflow: initial !important;
  font-size: 12px !important;
  letter-spacing: -0.5px !important;
  font-weight: 500 !important;
  padding: 0 5px !important;
  line-height: 20px !important;
}

/* 特定列宽度 - 使用明确的类名和属性选择器 */
/* 复选框列 */
.el-table__column_selection,
.el-table .is-leaf.el-table__cell:first-child {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
}

/* 主键ID列 */
.el-table__header th:nth-child(2) {
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;
}

/* 关联用户ID列 */
.el-table__header th:nth-child(3) {
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
}

/* 手机号列 */
.el-table__header th:nth-child(4) {
  width: 110px !important;
  min-width: 110px !important;
  max-width: 110px !important;
}

/* 文件名列 */
.el-table__header th:nth-child(5) {
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
}

/* 时间列 */
.el-table__header th:nth-child(6) {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
}

/* 状态列 */
.el-table__header th:nth-child(7) {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
}

/* 总数列 */
.el-table__header th:nth-child(8) {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
}

/* 错误信息列 */
.el-table__header th:nth-child(9),
.el-table__header th:nth-child(10),
.el-table__header th:nth-child(11) {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
}

/* 操作列 - 通常是最后一列 */
.el-table__header th:last-child {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
}

/* 强制应用单元格样式 */
.el-table__body .cell {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 0 5px !important;
  line-height: 20px !important;
}

/* 输入框样式优化 */
.el-input__wrapper {
  transition: all var(--transition-duration) ease !important;
  border-radius: 6px !important;
  box-shadow: 0 0 0 1px var(--border-color) inset !important;
}

.el-input__wrapper:hover {
  box-shadow: 0 0 0 1px var(--primary-color) inset !important;
}

.el-input__wrapper.is-focus {
  box-shadow: 0 0 0 2px var(--primary-color) inset !important;
}

/* 按钮样式优化 */
.el-button {
  transition: all var(--transition-duration) ease !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  padding: 8px 20px !important;
}

.el-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.el-button--primary {
  background: var(--gradient-primary) !important;
  border: none !important;
}

.el-button--success {
  background: var(--gradient-success) !important;
  border: none !important;
}

.el-button--warning {
  background: var(--gradient-warning) !important;
  border: none !important;
}

.el-button--danger {
  background: var(--gradient-danger) !important;
  border: none !important;
}

/* 分页样式优化 */
.el-pagination {
  padding: 0;
  font-weight: 500;
}

.el-pagination .el-pager li {
  transition: all var(--transition-duration) ease;
  border-radius: 4px;
}

.el-pagination .el-pager li:hover {
  background-color: var(--hover-color);
  transform: translateY(-2px);
}

.el-pagination .el-pager li.active {
  background: linear-gradient(45deg, var(--primary-color), #66b1ff);
  color: white;
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, var(--primary-color), #66b1ff);
  border-radius: 4px;
}

::-webkit-scrollbar-track {
  background: var(--background-color);
  border-radius: 4px;
} 